'use strict';
var React = require('react'),
	DescTextarea = require('./descTextarea');

var CheckQuestion = React.createClass({
	getInitialState:function(){
		return {
			answer:[]
		};
	},
	getDefaultProps:function(){
		return {
			curValue:{
				answer:''
			}
		};
	},
	getAnswer:function(){
		if(_.compact(this.state.answer).length === this.props.question.res.length){
			return {
				answer:this.state.answer.join(','),
				desc : this.state.desc
			};
		}else{
			return false;
		}
	},
	componentDidMount:function(){
		console.log('CheckQuestion.componentDidMount ...................');
		this._handleChecked();
	},
	componentDidUpdate:function(){
		console.log('CheckQuestion.componentDidUpdate....................');
		this._handleChecked();
	},
	_handleChecked:function(){
		this.state.answer = [];
		var self = this,
			tmp = !this.props.curValue.answer ? [] :this.props.curValue.answer.split(',');
		_.forEach(tmp,function(answer,index){
			if(answer == '1'){
				self.refs['ref_'+index+'_1'].checked = true;
				self.refs['ref_'+index+'_0'].checked = false;
			}else if (answer == '0'){
				self.refs['ref_'+index+'_1'].checked = false;
				self.refs['ref_'+index+'_0'].checked = true;
			}
		});
		if(!tmp || tmp.length === 0) {
			for(var i = 0; i < 4; i ++){
				self.refs['ref_'+i+'_1'].checked = false;
				self.refs['ref_'+i+'_0'].checked = false;
			}
			console.log('初始值为空啊。。。。。。。');
		}
		this.state.answer = _.compact(tmp);
		this.state.desc = this.props.curValue.desc;
	},
	_handleAnswer:function(e){
		this.state.answer[parseInt(e.target.name)] = e.target.value;
		if(_.compact(this.state.answer).length === this.props.question.res.length){
			if(this.props._answer){
				this.props._answer({answer:this.state.answer.join(',')});
			}
		}
	},
	_handleDesc:function(desc){
		this.state.desc = desc;
		if(this.props._answer){
			this.props._answer({desc:desc});
		}
	},
	render:function(){
		console.log('CheckQuestion render ..............');
		var res = [],self = this;
		res = _.map(this.props.question.res,function(res,ind){
			return <li className='list-group-item list-group-item-info' key={'check_'+ind} >
				{ind +1}：
				{res}
				<span className='label label-warning' style={{float:'right'}}>
					<label className="radio-inline">
						<input type='radio' 
						name = {ind}
						value = '1'
						ref = {'ref_'+ind+'_1'}
						onChange = {self._handleAnswer}
						/>正确
					</label>
					<label className="radio-inline">
						<input type='radio' 
						name = {ind}
						value = '0'
						ref = {'ref_'+ind+'_0'}
						onChange = {self._handleAnswer}
						/>错误
					</label>
				</span>
			</li>;
		});
		return (
			<div className="panel panel-success">
				<div className="panel-heading">
					<strong>第{this.props.question.index}题: {this.props.question.title}</strong>
				</div>
				<div className='panel-body'>
					<ul className="list-group">
						{res}
					</ul>
				</div>
				<DescTextarea _answer={this._handleDesc} curValue={this.props.curValue.desc} />
			</div>
		);
	}
});

module.exports = CheckQuestion;